<template>
  <div class="main">
    <div class="middle">
      <div class="left">
        <img :src="jeecgleft" style="width: 95%" />
      </div>
      <div class="right">
        <div class="user-layout-login">
          <!-- <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
      <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"  @change="handleTabClick">
        <a-tab-pane key="tab1" tab="账号密码登录">
          <login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-account>
        </a-tab-pane>
      </a-tabs>
      <a-form-item style="margin-top:24px">
        <a-button size="large"  type="primary"  htmlType="submit"  class="login-button"  :loading="loginBtn"  @click.stop.prevent="handleSubmit" :disabled="loginBtn">确定
        </a-button>
      </a-form-item>
    </a-form-model> -->
          <div class="formmodel">
            <!-- <h2>用户登录</h2> -->
            <div class="formmodeltitle">
              <img src="~@/assets/langulogo.png" class="logo" alt="logo" />
              <span class="title">兰谷科技</span>
            </div>
            <div style="height: 360px;">
            <a-form-model @keyup.enter.native="handleSubmit">
              <a-tabs v-model="loginIdentityType" @change="loginCallback">
                <a-tab-pane key="employee" tab="账号">
                  <login-account-employee ref="alogin" @validateFail="validateFail" @success="requestSuccess"
                    @fail="requestFailed"></login-account-employee>
                </a-tab-pane>
                <!-- <a-tab-pane key="customer" tab="客户">    
                    <login-account ref="customerAlogin" @validateFail="validateFail" @success="requestSuccess"
                      @fail="requestFailed"></login-account>
                </a-tab-pane> -->
              </a-tabs>
              <a-form-item style="margin-top: 24px">
                <a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="loginBtn"
                  @click.stop.prevent="handleSubmit" :disabled="loginBtn">确定
                </a-button>
              </a-form-item>
            </a-form-model>     
              <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible"
                @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>
              <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
              <div v-if="loginIdentityType === 'employee'"> <third-login ref="thirdLogin"></third-login></div>
              <reset-password ref="userPassword" @resetCallback="resetPwdHandle"></reset-password>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {
    ACCESS_TOKEN,
    ENCRYPTED_STRING,
    USER_INFO
  } from '@/store/mutation-types'
  import ThirdLogin from './third/ThirdLogin'
  import LoginSelectTenant from './LoginSelectTenant'
  import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
  import {
    getEncryptedString
  } from '@/utils/encryption/aesEncrypt'
  import {
    timeFix
  } from '@/utils/util'
  import LoginAccountEmployee from './LoginAccountEmployee'
  import LoginAccount from './LoginAccount'
  import LoginPhone from './LoginPhone'
  import ResetPassword from '@/components/tools/ResetPassword'
  import {
    mapGetters
  } from 'vuex'

  export default {
    components: {
      LoginSelectTenant,
      TwoStepCaptcha,
      ThirdLogin,
      LoginAccount,
      LoginPhone,
      ResetPassword,
      LoginAccountEmployee
    },
    data() {
      return {
        customActiveKey: 'tab1',
        rememberMe: true,
        loginBtn: false,
        requiredTwoStepCaptcha: false,
        stepCaptchaVisible: false,
        encryptedString: {
          key: '',
          iv: '',
        },
        // jeecgleft: require('@/assets/jeecg_left.png'),
        jeecgleft: require('@/assets/jeecg_left.png'),
        loginIdentityType:'',  //登录身份
      }
    },
    created() {
      this.loginIdentityType = Vue.ls.get('LOGIN_TYPE') ? Vue.ls.get('LOGIN_TYPE') : 'employee'
      // Vue.ls.remove(ACCESS_TOKEN)
      this.getRouterData()
      this.rememberMe = true
    },
    methods: {
      handleTabClick(key) {
        this.customActiveKey = key
      },
      handleRememberMeChange(e) {
        this.rememberMe = e.target.checked
      },
      /**跳转到登录页面的参数-账号获取*/
      getRouterData() {
        this.$nextTick(() => {
          let temp = this.$route.params.username || this.$route.query.username || ''
          if (temp) {
            this.$refs.alogin.acceptUsername(temp)
          }
        })
      },
      //切换标签页
     loginCallback(value){
       Vue.ls.set('LOGIN_TYPE',value)
     },
      //登录
      handleSubmit() {
        this.loginBtn = true
        // if (this.customActiveKey === 'tab1') {
        //   // 使用账户密码登录
        //   this.$refs.alogin.handleLogin(this.rememberMe)
        // } else {
        //   //手机号码登录
        //   this.$refs.plogin.handleLogin(this.rememberMe)
        // }
        if(this.loginIdentityType === 'employee'){
          this.$refs.alogin.handleLogin(this.rememberMe)
        }else{
          this.$refs.customerAlogin.handleLogin(this.rememberMe)
        }    
      },
      // 校验失败
      validateFail() {
        this.loginBtn = false
      },
      // 登录后台成功
      requestSuccess(loginResult) {
        //登录类型是员工的话，登录成功后选择部门
        // if(this.loginIdentityType === 'employee'){}
         this.$refs.loginSelect.show(loginResult)
      },
      //登录后台失败
      requestFailed(err) {
        let description = ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试'
        this.$notification['error']({
          message: '登录失败',
          description: description,
          duration: 4,
        })
        //账户密码登录错误后更新验证码
        if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) {
          this.$refs.alogin.handleChangeCheckCode()
        }
        this.loginBtn = false
      },
      loginSelectOk() {
         this.loginSuccess()
      },
      ...mapGetters(['nickname', 'avatar', 'userInfo']),
      //登录成功
      loginSuccess() {
        this.loginBtn = false
         //判断登录类型初始密码  
        const userPhoneTailNum = (Vue.ls.get(USER_INFO).phone).slice(7)   //手机尾号后四位
        const workNo = Vue.ls.get(USER_INFO).workNo  
        let initPwd = false
        const pwdInput = this.loginIdentityType === 'employee' ? this.$refs.alogin.model.password : this.$refs.customerAlogin.model.password 
        if(workNo){
          initPwd = (pwdInput.toUpperCase() === (userPhoneTailNum + workNo)) ? true : false
        }else{
          initPwd = pwdInput === '123456' ? true : false
        }
        if(initPwd){
          let username = this.userInfo().username
          this.$refs.userPassword.show(username)
          this.$ls.set('canLogin', false)
        }else{
          this.$ls.set('canLogin', true)
          this.$router.push({
            path: '/dashboard/analysis'
          }).catch(() => {
            console.log('登录跳转首页出错,这个错误从哪里来的')
          })
          this.$notification.success({
            message: '欢迎',
            description: `${timeFix()}，欢迎回来`,
          })
        }
              
      },
      //重置密码成功,重新登录
      resetPwdHandle(){
        //关闭选择部门弹窗
        this.$refs.loginSelect.closeModal()
        if(this.loginIdentityType === 'employee'){
          this.$refs.alogin.resetLoginEmployee()
        }else{
           this.$refs.customerAlogin.resetLoginCustomer()
        }   
      },
      stepCaptchaSuccess() {
        this.loginBtn = false
        this.loginSuccess()
      },
      stepCaptchaCancel() {
        this.Logout().then(() => {
          this.loginBtn = false
          this.stepCaptchaVisible = false
        })
      },
      //获取密码加密规则
      getEncrypte() {
        var encryptedString = Vue.ls.get(ENCRYPTED_STRING)
        if (encryptedString == null) {
          getEncryptedString().then((data) => {
            this.encryptedString = data
          })
        } else {
          this.encryptedString = encryptedString
        }
      },
    },
  }
</script>
<style lang="less" scoped>
  .main {
    width: 100%;
  }

  .middle {
    //  min-width: 1600px;
    width: 60%;
    margin: 0 auto;
    display: flex;
    box-shadow: 0 4px 8px 1px #0003;
    position: fixed;
    top: 50%;
    left: 50%;
    height: auto;
    transform: translate(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    background: #fff;
  }

  .formmodeltitle {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10%;
  }

  .title {
    font-size: 38px;
    color: #1890ff;
    font-weight: 600;
  }

  .logo {
    height: 40px;
    vertical-align: top;
    margin-right: 16px;
    border-style: none;
  }

  .left {
    flex: 3;
  }

  .right {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /deep/.ant-tabs-bar {
    border-bottom: none;
    margin-bottom: 20px;
  }

  /deep/.ant-tabs-nav .ant-tabs-tab {
    font-size: 16px;
  }

  @media screen and (max-width: 992px) {
    .middle {
      width: 90% !important;
    }

    .left {
      display: none;
    }

    .right {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }

    h2 {
      font-size: 24px;
      color: #2882fe;
      text-align: center;
    }

    .formmodeltitle {
      margin-bottom: 10%;
    }

    .title {
      font-size: 30px;
      font-weight: 600;
    }

    .logo {
      height: 32px;
    }
  }

  @media screen and (min-width: 992px) and (max-width: 1200px) {

    .middle {
      width: 80%;
    }

    .title {
      font-size: 32px;
    }
  }

  @media screen and (min-width: 1200px) and (max-width: 1600px) {
    h2 {
      font-size: 24px;
      color: #2882fe;
      text-align: center;
    }

    .formmodeltitle {
      margin-bottom: 10%;
    }

    .logo {
      height: 34px;
    }

    .title {
      font-size: 34px;
    }

    .middle {
      width: 70%;
    }
  }

  @media screen and (min-width: 1600px) {
    h2 {
      text-align: center;
      font-size: 38px;
      color: #2882fe;
    }

    .logo {
      height: 40px;
    }

    .formmodeltitle {
      margin-bottom: 10%;
    }

    .title {
      font-size: 38px;
    }

    .middle {
      width: 60%;
    }
  }

  .user-layout-login {
    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
    display: flex;

    label {
      font-size: 14px;
    }

    .formmodel {
      width: 80%;
      margin: auto;
      text-align: left;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      height: 40px;
      width: 100%;
    }

    .user-login-other {
      text-align: left;
      // margin-top: 24px;
      // line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }

      .register {
        float: right;
      }
    }
  }
</style>
<style>
  .valid-error .ant-select-selection__placeholder {
    color: #f5222d;
  }
</style>